<template>
  <div class="container mx-auto p-8">
    <h1 class="text-2xl font-bold mb-6">开关测试页面</h1>

    <div class="space-y-8">
      <!-- 测试1: 最简单的 Switch 组件 -->
      <div class="p-4 border rounded">
        <h2 class="text-lg font-medium mb-4">基本 Switch 组件测试</h2>
        <div class="flex items-center space-x-4">
          <span>当前状态: {{ checked ? '开启' : '关闭' }}</span>
          <Switch :model-value="checked" @update:model-value="onToggle" />
        </div>
        <div class="mt-2">
          <button @click="logState" class="px-3 py-1 bg-blue-500 text-white rounded">
            打印状态
          </button>
        </div>
      </div>

      <!-- 测试2: 手动实现的开关 -->
      <div class="p-4 border rounded">
        <h2 class="text-lg font-medium mb-4">原生 checkbox 测试</h2>
        <div class="flex items-center space-x-4">
          <span>当前状态: {{ checked2 ? '开启' : '关闭' }}</span>
          <div class="relative inline-block w-10 align-middle select-none">
            <input type="checkbox" v-model="checked2"
              class="toggle-checkbox absolute block w-4 h-4 rounded-full bg-white border-4 appearance-none cursor-pointer" />
            <label class="toggle-label block overflow-hidden h-4 rounded-full bg-gray-300 cursor-pointer"></label>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Switch } from '@/components/ui/switch';

const checked = ref(false);
const checked2 = ref(false);

function onToggle(value: boolean) {
  console.log('Switch toggle:', value);
  checked.value = value;
}

function logState() {
  console.log('当前状态:', checked.value);
}
</script>

<style scoped>
/* 简易开关样式 */
.toggle-checkbox {
  right: 0;
  z-index: 10;
  transition: all 0.3s;
}

.toggle-checkbox:checked {
  right: 6px;
}

.toggle-label {
  transition: background-color 0.3s;
}
</style>